<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp" %>
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>凯盛项目管理系统</title>
	<link rel="shortcut icon" href="../img/favicon.ico" >
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/jquery.atwho.css">
	<link rel="stylesheet" href="../css/bootstrap-responsive.css">
	<link rel="stylesheet" href="../css/docs.css">
	<style type="text/css">
		body{
			background:url(../img/b.png);
			
		}
		
	</style>
</head>
<body class="body">
	<% pageContext.setAttribute("left", "new"); %>
	<%@ include file="include/top.jsp" %>
	
	
	<div class="container" style="background: url(../img/c.png) repeat-y 970px 0;">
	  <div class="row">
		<%@ include file="include/left.jsp" %>
		<div class="span7" style="margin-top:10px;border-left:1px solid #ccc">
		 
		 
		 
		 <h1 style="color:#ff7400;margin-bottom:20px;margin-left:15px;">收到的评论：</h1>
		 
		 
		 
		  
			
			
			<div id="test" style="border-left:1px #ccc solid;border-right:1px #ccc solid;border-top:3px solid #ccc;">
			
					<c:if test="${empty page.list }">
						<h3 style="color:red;margin-top:10px;margin-left:10px;">还没有任何人评论你哦。。。</h3>
					</c:if>
					<c:forEach items="${page.list }" var="s">
						<div class="media" style="margin-top:10px;border-top:1px #0088cc solid;">
						
						
						
						
						
							<a class="pull-left" href="javascript:;" style="margin-left:10px;margin-right:10px;margin-top:10px;">
			                <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px;" src="showimg.img?n=${s.createuser.pic }">
			              </a>
			              <div class="media-body">
			                <h3 class="media-heading" style="margin-left:100px;">${s.createuser.username }</h3>
			                 <span style="margin-left:10px;">${s.content }</span><br/><br/>
			                 <span style="margin-left:10px;">原帖：<a href="shownewstate.jspx?id=${s.fid }">${s.fidshow.content }</a></span>
			              </div>
			              <div style="float:right;margin-right:20px;">
			              	<a style="margin-right:40px;color:#ff7400" href="javascript:;" title="${s.createtime }">${s.time }</a>
			              	<a href="javascript:0;" id="mya${s.id }">评论</a>
			              </div>
			              
			              <div style="clear:both;">
			            	
			            </div>
			            <!-- huifu -->
			            
			              <form action="savereplay.jspx" method="post" id="f${s.id }" style="float:right;margin-right:10px;margin-top:10px;display:none">
			              		回复：<input autocomplete="off" type="text"class="span3 atwho" id="replay${s.id }" name="huifucontent"><br/>
			              		<input type="hidden" value="${s.fid }" name="huifufid" >
			              		<input type="hidden" value="${s.createuser.id }" name="replaywhoid">
			              		<button type="submit" class="btn-success" style="float:right;margin-right:20px;" id="sub${s.id }">回复</button>
			              		<a href="javascript:;" style="float:right;margin-right:20px;" id="quxiao${s.id }">取消</a>
			              </form>
						
			              
			              
			              
			              <!-- gentie -->
			             
			             
			              
			            </div>
			            <div style="clear:both;">
			            	
			            </div>
					</c:forEach>
						
				
			</div>
			
			<div style="margin-top:30px;"></div>
            
            <%@ include file="include/page.jsp" %>
            
            <div style="margin-buttom:70px;">
            	
            </div>
		 
		 
		 
		</div>
		<!-- right -->
		<%@ include file="include/right.jsp" %>
	  </div>
	</div>
	
	<script type="text/javascript" src="../js/jquery.atwho.min.js"></script>
	<script type="text/javascript" src="../js/at.js"></script>
	<script type="text/javascript">
		
	$("#btn").click(function(){
		var content = $("#area").val();
		$.get("savenewstate.jspx?content="+encodeURIComponent(content),function(result){
				var temp = $("#tempstate").html();
				var show = $("#test").html();
				
				var t = temp.replace(/{{pic}}/g,result.createuser.pic).replace(/{{username}}/g,result.createuser.username).replace(/{{content}}/g,result.content).replace(/{{createtime}}/g,result.createtime).replace(/{{viewtime }}/g,result.viewcreatetime).replace(/{{id}}/g,result.id).replace(/{{createuserid }}/g,result.createuser.id);
				var s = t + show;
				$("#test").html(s);
				
				$("#not").hide();
				
			});
	});
	
	
	/*
		这边作评论的显示用得。。。。
	*/
	
	
	
	<c:forEach items="${page.list }" var="s">
	
			$("#mya${s.id}").click(function(){
				$("#f${s.id}").show();
			});
	
			$("#quxiao${s.id}").click(function(){
				$("#f${s.id}").hide();
			});
	
			
			
			<c:forEach items="${s.replaylist }" var="v">
				$("#r${v.id}").click(function(){
					$("#re${v.id}").show();
				});
				$("#quxiao${v.id}").click(function(){
					$("#re${v.id}").hide();
				});
			
			</c:forEach>
			
	</c:forEach>

	
	
	$("#area").blur(function(){
		var text = $("#area").val();
		if(text.length < 140){
			if(text.length == 0){
				$("#hide").show();
				$("#btn").hide();
			}else{
				$("#hide").hide();
				$("#btn").show();
			}
			
			$("#show").show();
			$("#show2").hide();
			$("#number").html(140-text.length);
		}else{
			$("#btn").hide();
			$("#hide").show();
			$("#show2").show();
			$("#show").hide();
			$("#chao").html(text.length - 140);
		}
	});
	$("#area").keyup(function(){
		var text = $("#area").val();
		
		if(text.length < 140){
			if(text.length == 0){
				$("#hide").show();
				$("#btn").hide();
			}else{
				$("#hide").hide();
				$("#btn").show();
			}
			$("#show").show();
			$("#show2").hide();
			$("#number").html(140-text.length);
		}else{
			$("#btn").hide();
			$("#hide").show();
			$("#show2").show();
			$("#show").hide();
			$("#chao").html(text.length - 140);
		}
		
		
	});
	
	
	
	//at的功能
	
	var names = new Array(); 
	var i = 0;
	<c:forEach items="${userlist }" var="v">
		names[i] = "${v.username}";
		i++;
	 </c:forEach>
	 
	 
	var names = $.map(names,function(value,i) {
	    return {'id':i,'name':value,'email':" "};
	});
	
	$(".atwho").atwho('@', {
	    data: names,
	    limit:5
	});
	
			
	</script>
</body>
</html>